<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: Sam
 * date: 2021-03-01 16:01:08
 * @LastEditors: Sam
 * @LastEditTime: 2022-01-17 17:32:12
-->
{include file="common/public/header"}
<style>
      /*  .layui-form-item {
            margin-bottom: 0px;
        }*/

        .pictrueBox {
            display: inline-block !important;
        }

        .pictrue {
            width: 60px;
            height: 60px;
            border: 1px dotted rgba(0, 0, 0, 0.1);
            margin-right: 15px;
            display: inline-block;
            position: relative;
            cursor: pointer;
        }

        .pictrue img {
            width: 100%;
            height: 100%;
        }

        .upLoad {
            width: 58px;
            height: 58px;
            line-height: 58px;
            border: 1px dotted rgba(0, 0, 0, 0.1);
            border-radius: 4px;
            background: rgba(0, 0, 0, 0.02);
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .rulesBox {
            display: flex;
            flex-wrap: wrap;
            margin-left: 10px;
        }

        .layui-tab-content {
            margin-top: 15px;
        }

        .ml110 {
            margin: 18px 0 4px 110px;
        }

        .rules {
            display: flex;
        }

        .rules-btn-sm {
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            width: 109px;
        }

        .rules-btn-sm input {
            width: 79% !important;
            height: 84% !important;
            padding: 0 10px;
        }

        .ml10 {
            margin-left: 10px !important;
        }

        .ml40 {
            margin-left: 40px !important;
        }

        .closes {
            position: absolute;
            left: 86%;
            top: -18%;
        }
        .red {
            color: red;
        }
        .layui-input-block .layui-video-box{
            width: 22%;
            height: 180px;
            border-radius: 10px;
            background-color: #707070;
            margin-top: 10px;
            position: relative;
            overflow: hidden;
        }
        .layui-input-block .layui-video-box i{
            color: #fff;
            line-height: 180px;
            margin: 0 auto;
            width: 50px;
            height: 50px;
            display: inherit;
            font-size: 50px;
        }
        .layui-input-block .layui-video-box .mark{
            position: absolute;
            width: 100%;
            height: 30px;
            top: 0;
            background-color: rgba(0,0,0,.5);
            text-align: center;
        }
        .store_box{
            display: flex;
        }
        .info{
            color: #c9c9c9;
            padding-left: 10px;
            line-height: 30px;
        }
</style>
        <div class="layui-card" id="app" style="height: auto">
            <div class="layui-card-header">
                <span class="">商品添加</span>
                <button style="margin-left: 20px" type="button" @click="goBack" class="layui-btn layui-btn-primary layui-btn-xs">返回列表</button>
            </div>
            <div class="layui-card-body">
                <form class="layui-form" action="">
                <div class="layui-tab layui-tab-brief" lay-filter="docTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id='1'>基础信息</li>
                        <li lay-id='2'>商品详情</li>
                        <li lay-id='3'>其他设置</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-form-item">
                                
                                <label class="layui-form-label">商品分类<i class="red">*</i></label>
                                <div class="layui-input-block">
                                    <select name="cate_id" lay-filter="cate" lay-search>
                                        <option value="">选择分类</option>
                                        <option :value="item.value" v-for="item in cateList" :selected=" item.value == formData.cate_id ? true : false ">{{item.label}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品名称<i class="red">*</i></label>
                                <div class="layui-input-block">
                                    <input type="text" name="store_name" lay-verify="title" autocomplete="off"
                                           placeholder="请输入商品名称" class="layui-input" v-model="formData.store_name" maxlength="100">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品关键字</label>
                                <div class="layui-input-block">
                                    <input style="width: 40%" type="text" name="keyword" lay-verify="title" autocomplete="off"
                                           placeholder="请输入商品关键字" class="layui-input" v-model="formData.keyword">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">单位</label>
                                <div class="layui-input-block">
                                    <input style="width: 40%" type="text" name="unit_name" lay-verify="title" autocomplete="off"
                                           placeholder="请输入单位" class="layui-input" v-model="formData.unit_name">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                    <label class="layui-form-label">商品简介</label>
                                    <div class="layui-input-block">
                                        <textarea name="store_info" v-model="formData.store_info"
                                                  placeholder="请输入商品简介" class="layui-textarea"></textarea>
                                    </div>
                            </div>
                            <div class="layui-form-item submit">
                                <label class="layui-form-label">主图视频</label>
                                <div class="layui-input-block">
                                    <input type="text" name="link_key" v-model="videoLink" style="width:50%;display:inline-block;margin-right: 10px;" autocomplete="off" placeholder="请输入视频链接" class="layui-input">
                                    <button type="button" @click="uploadVideo" class="layui-btn layui-btn-sm layui-btn-normal">{{videoLink ? '确认添加' : '上传视频'}}</button>
                                    <input ref="filElem" type="file" accept="video/*" style="display: none">
                                </div>
                                <div class="layui-input-block video_show" style="width: 30%;margin-top: 20px;" v-if="upload.videoIng">
                                    <div class="layui-progress" style="margin-bottom: 10px">
                                        <div class="layui-progress-bar layui-bg-blue" :style="'width:'+progress+'%'"></div>
                                    </div>
                                    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger percent">{{progress}}%</button>
                                </div>
                                <div class="layui-input-block" v-if="formData.video_link">
                                    <div class="layui-video-box" v-if="formData.video_link">
                                        <video style="width:100%;height: 100%!important;border-radius: 10px;" :src="formData.video_link" controls="controls">
                                            您的浏览器不支持 video 标签。
                                        </video>
                                        <div class="mark" @click="delVideo">
                                            <span class="layui-icon layui-icon-delete" style="font-size: 30px; color: #1E9FFF;"></span>
                                        </div>

                                    </div>
                                    <div class="layui-video-box" v-else>
                                        <i class="layui-icon layui-icon-play"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">商品缩略图<i class="red">*</i></label>
                                   <div class="pictrueBox pictrue" v-if="formData.image">
                                        <img :src="formData.image" @click="preview(formData.image)">
                                        <i class="layui-icon closes" @click="deleteImage('image')">&#x1007</i>
                                    </div>
                                    <div class="pictrueBox">
                                        <div class="upLoad" @click="upload_item('image')"> 
                                            <i class="layui-icon layui-icon-picture" class="iconfont"
                                               style="font-size: 26px;"></i>
                                        </div>
                                       <input ref="image" type="file"  accept="image/*" style="display: none" @change="change_image('image')">
                                    </div>
                            </div>
                           <div class="layui-form-item">
                                <label class="layui-form-label">商品轮播图<i class="red">*</i></label>
                                <div class="pictrueBox pictrue" v-for="(item,index) in formData.slider_image">
                                    <img :src="item" @click="preview(item)">
                                    <i class="layui-icon closes" @click="deleteImage('slider_image',index)">&#x1007</i>
                                </div>
                                <div class="pictrueBox">
                                    <div class="upLoad" @click="upload_item('images')"
                                         v-if="formData.slider_image.length <= rule.slider_image.maxLength">
                                        <i class="layui-icon layui-icon-picture" class="iconfont"
                                           style="font-size: 26px;"></i>
                                    </div>
                                    <input ref="images" type="file" accept="image/*"  multiple="true" style="display: none" @change="change_images">
                                </div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                <div class="grid-demo grid-demo-bg1">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">商品规格<i class="red">*</i></label>
                                        <div class="layui-input-block">
                                            <input type="radio" name="spec_type" value="0" title="单规格"
                                                   lay-filter="spec_type"
                                                   :checked="formData.spec_type == 0 ? true : false">
                                            <input type="radio" name="spec_type" value="1" title="多规格"
                                                   lay-filter="spec_type"
                                                   :checked="formData.spec_type == 1 ? true : false">
                                        </div>
                                    </div>
                                </div>
                            </div>                
                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" v-if="formData.spec_type == 0">
                                <div class="grid-demo grid-demo-bg1">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label"></label>
                                        <div class="layui-input-block">
                                            <table class="layui-table">
                                                <thead>
                                                <tr>
                                                    <th>图片<i class="red">*</i></th>
                                                    <th>售价<i class="red">*</i></th>
                                                    <th>成本价</th>
                                                    <th>原价<i class="red">*</i></th>
                                                    <th>库存<i class="red">*</i></th>
                                                    <th>产品编号</th>
                                                </tr>
                                                </thead>
                                                <tr>
                                                    <td>
                                                        <div class="pictrueBox">
                                                            <div class="pictrue" @click="upload_item('attr_img')" v-if="formData.attr.pic">
                                                                <img :src="formData.attr.pic">
                                                            </div>
                                                            <div class="upLoad" @click="upload_item('attr_img')" v-else>
                                                                <i class="layui-icon layui-icon-picture" class="iconfont" style="font-size: 26px;">
                                                                </i>
                                                            </div>
                                                            <input ref="attr_img" accept="image/*"  type="file" style="display: none" @change="change_attr_img('attr_img')">
                                                        </div>
                                                    </td>
                                                    <td><input type="text" v-model="formData.attr.price"
                                                               class="layui-input"></td>
                                                    <td><input type="text" v-model="formData.attr.cost"
                                                               class="layui-input"></td>
                                                    <td><input type="text" v-model="formData.attr.ot_price"
                                                               class="layui-input"></td>
                                                    <td><input type="text" v-model="formData.attr.stock"
                                                               class="layui-input"></td>
                                                    <td><input type="text" v-model="formData.attr.bar_code"
                                                               class="layui-input"></td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md12" v-if="formData.spec_type == 1">
                                <div class="layui-col-xs12 layui-col-sm6 layui-col-md6">
                                    <div class="grid-demo grid-demo-bg1" style="margin-bottom: 10px;">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">选择规格<i class="red">*</i></label>
                                            <div class="layui-input-block selected store_box">
                                                <select name="ruleIndex"  lay-filter="rule_index">
                                                    <option value="-1">请选择</option>
                                                    <option :value="index" v-for="(item,index) in ruleList" >{{item.rule_name}}</option>
                                                </select>
                                                <button type="button" style="border-left: 0;" class="layui-btn layui-btn-sm" @click="allRule">确认</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <div class="grid-demo grid-demo-bg1" v-for="(item,index) in formData.items">
                                        <div class="ml110"><span>{{item.value}}</span><i class="layui-icon"@click="deleteItem(index)">&#x1007;</i>
                                        </div>
                                        <div class="layui-form-item rules">
                                            <label class="layui-form-label"></label>
                                            <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"
                                                    v-for="(val,inx) in item.detail">
                                                {{val}}
                                                <i class="layui-icon layui-icon-close"
                                                   @click="deleteValue(item,inx)"></i>

                                            </button>
                                            <div class="rules rulesBox">
                                                <div class="rules-btn-sm">
                                                    <input type="text" v-model="item.detailValue" name="title"
                                                           autocomplete="off" placeholder="请输入">
                                                </div>
                                                <button class="layui-btn layui-btn-sm" type="button"
                                                        @click="addDetail(item)">添加
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="grid-demo grid-demo-bg1 rules" style="margin-top: 24px;" v-if="newRule">
                                        <div class="layui-form-item layui-form-text rules">
                                            <label class="layui-form-label">规格：</label>
                                            <div class="rules-btn-sm">
                                                <input type="text" name="title" v-model="formDynamic.attrsName"
                                                       autocomplete="off" placeholder="请输入规格">
                                            </div>
                                        </div>
                                        <div class="layui-form-item layui-form-text rules">
                                            <label class="layui-form-label">规格值：</label>
                                            <div class="rules-btn-sm">
                                                <input type="text" name="title" v-model="formDynamic.attrsVal"
                                                       autocomplete="off" placeholder="请输入规格值">
                                            </div>
                                        </div>
                                        <button class="layui-btn layui-btn-sm ml40" type="button"
                                                @click="createAttrName">添加
                                        </button>
                                        <button class="layui-btn layui-btn-sm ml10" type="button"
                                                @click="newRule = false">取消
                                        </button>
                                    </div>
                                    <div class="grid-demo grid-demo-bg1" style="margin-top: 20px;margin-bottom: 10px;" v-if="newRule == false && ruleBool">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label"></label>
                                            <button class="layui-btn layui-btn-sm" type="button" @click="newRule = true">
                                                添加新规格
                                            </button>
                                            <button class="layui-btn layui-btn-sm" type="button" @click="generates">立即生成
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12"
                                     v-if="formData.attrs.length && formHeader.length">

                                    <div class="grid-demo grid-demo-bg1" style="margin-top: 20px">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">批量设置：</label>
                                            <div class="layui-input-block">
                                                <table class="layui-table">
                                                    <thead>
                                                    <tr>
                                                        <th>图片<i class="red">*</i></th>
                                                        <th>售价<i class="red">*</i></th>
                                                        <th>成本价</th>
                                                        <th>原价<i class="red">*</i></th>
                                                        <th>库存<i class="red">*</i></th>
                                                        <th>产品编号</th>
                                                        <th width="15%" style="text-align: center;">操作</th>
                                                    </tr>
                                                    </thead>
                                                    <tr>
                                                        <td>

                               
                                                            <div class="pictrueBox">
                                                                <div class="pictrue" @click="upload_item('batch_pic')" v-if="batchAttr.pic">
                                                                    <img :src="batchAttr.pic">
                                                                </div>
                                                                <div class="upLoad"    @click="upload_item('batch_pic')" v-else>
                                                                    <i class="layui-icon layui-icon-picture" class="iconfont"
                                                                       style="font-size: 26px;"></i>
                                                                </div>
                                                                <input ref="batch_pic"  accept="image/*"  type="file" style="display: none" @change="change_batch('batch_pic')">
                                                            </div>
                                                        </td>
                                                        <td><input type="text" v-model="batchAttr.price"
                                                                   class="layui-input"></td>
                                                        <td><input type="text" v-model="batchAttr.cost"
                                                                   class="layui-input"></td>
                                                        <td><input type="text" v-model="batchAttr.ot_price"
                                                                   class="layui-input"></td>
                                                        <td>
                                                            <input type="text" v-model="batchAttr.stock"
                                                                   class="layui-input">
                                                        </td>
                                                        <td>
                                                            <input type="text" v-model="batchAttr.bar_code"
                                                                   class="layui-input">
                                                        </td>
                                                        <td style="text-align: center;">
                                                            <button class="layui-btn layui-btn-sm" type="button"
                                                                    @click="batchAdd">批量修改
                                                            </button>
                                                            <button class="layui-btn layui-btn-sm layui-btn-danger" type="button"
                                                                    @click="batchClear">清空
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="grid-demo grid-demo-bg1" style="margin-top: 20px">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">商品属性：</label>
                                            <div class="layui-input-block">
                                                <table class="layui-table">
                                                    <thead>
                                                    <tr>
                                                        <th v-for="(item,index) in formHeader" v-if="item.align">
                                                            {{item.title}}
                                                        </th>
                                                    </tr>
                                                    </thead>
                                                    <tr v-for="(item,index) in formData.attrs">
                                                        <td v-for="(n,v) in item.detail">{{n}}</td>
                                                        <td>
                                                            <div class="pictrueBox">
                                                                <div class="pictrue" v-if="item.pic"
                                                                     @click="upload_item('item_pic'+index)"><img
                                                                            :src="item.pic"></div>
                                                                <div class="upLoad" @click="upload_item('item_pic'+index)"
                                                                     v-else>
                                                                    <i class="layui-icon layui-icon-picture"
                                                                       class="iconfont" style="font-size: 26px;"></i>
                                                                      
                                                                    
                                                                </div>
                                                                 <input :ref="'item_pic'+index" accept="image/*"  type="file" style="display: none" @change="change_file('item_pic'+index,index)">
                                                            </div>
                     
                                                        </td>
                                                        <td><input type="number" v-model="item.price"
                                                                   class="layui-input"></td>
                                                        <td><input type="number" v-model="item.cost"
                                                                   class="layui-input"></td>
                                                        <td><input type="number" v-model="item.ot_price"
                                                                   class="layui-input"></td>
                                                        <td><input type="number" v-model="item.stock"
                                                                   class="layui-input"></td>
                                                        <td>
                                                            <input type="text" v-model="item.bar_code"
                                                                   class="layui-input">
                                                        </td>
                                                        <td>
                                                            <button class="layui-btn layui-btn-sm" type="button"
                                                                    @click="deleteAttrs(index)">删除
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                                <div class="layui-row layui-col-space15">
                                    <textarea type="text/plain" name="description" id="myEditor" style="width:100%;">{{formData.description}}</textarea>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">商品状态</label>
                                        <div class="layui-input-inline">
                                        <input type="radio" name="is_show" lay-filter="is_show" value="1" title="上架"
                                               :checked="formData.is_show == 1 ? true : false">
                                        <input type="radio" name="is_show" lay-filter="is_show" value="0" title="下架"
                                               :checked="formData.is_show == 0 ? true : false">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">热卖单品</label>
                                        <div class="layui-input-inline">
                                        <input type="radio" name="is_hot" lay-filter="is_hot" value="1" title="是"
                                               :checked="formData.is_hot == 1 ? true : false">
                                        <input type="radio" name="is_hot" lay-filter="is_hot" value="0" title="否"
                                               :checked="formData.is_hot == 0 ? true : false">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">首发新品</label>
                                        <div class="layui-input-inline">
                                            <input type="radio" name="is_new" lay-filter="is_new" value="1" title="是"
                                                   :checked="formData.is_new == 1 ? true : false">
                                            <input type="radio" name="is_new" lay-filter="is_new" value="0" title="否"
                                                   :checked="formData.is_new == 0 ? true : false">
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                     <div class="layui-tab-content">
                            <div class="layui-row layui-col-space15">
                                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                                    <div class="grid-demo grid-demo-bg1">
                                        
                                        <div class="layui-form-item">
                                            <button class="layui-btn layui-btn-primary layui-btn-sm" type="button" @click="back" v-if="layTabId != 1">上一步</button>
                                            <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" @click="next" v-if="layTabId != 3">下一步</button>
                                            <button class="layui-btn layui-btn-normal layui-btn-sm" id="submit" type="button" v-if="layTabId == 3" @click="handleSubmit()">提交</button>
                                            
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
                </form>
      
            </div>
        </div>
{include file="common/public/ueditor" /}
{include file="common/public/umeditor" /}
{include file="common/public/footer" /}
{block name="script"}
<script>
    var id = {$id|default=0};
    new Vue({
        el: '#app',
        data: {
            loading :false,
            //分类列表
            cateList: [],
            id:id,
            upload:{
                videoIng:false
            },
            selected: '' ,
            formData: {
                cate_id: 0,
                temp_id: 0,
                commission:0,
                store_name: '',
                keyword: '',
                unit_name: '',
                postage: '',
                store_info: '',
                image: '',
                video_link: '',
                slider_image: [],
                price: '',
                spec_type: 0,
                attr: {
                    pic: '',
                    price: 0,
                    cost: 0,
                    ot_price: 0,
                    stock: 0,
                    bar_code: ''
                },
                attrs: [],
                description: '',
                ficti: 0,
                give_integral: 0,
                sort: 0,
                is_show: 1,
                spec_type : 0,
                is_hot: 0,
                is_new: 0,
                items: [
                    // {
                    //     value: '',
                    //     detailValue:'',
                    //     attrHidden:false,
                    //     detail:[]
                    // }
                ]
            },
            videoLink:'',
            //批量添加属性
            batchAttr:{
                pic: '',
                price: 0,
                cost: 0,
                ot_price: 0,
                stock: 0,
                bar_code: ''
            },
            //多属性header头
            formHeader:[],
            // 规格数据
            formDynamic: {
                attrsName: '',
                attrsVal: ''
            },
            attr: [],//临时属性
            newRule: false,//是否添加新规则
            radioRule: ['is_show', 'is_hot','is_new', 'spec_type'],//radio 当选规则
            rule: { //多图选择规则
                slider_image: {
                    maxLength: 5
                }
            },
            ruleList:[],
            ruleIndex:-1,
            progress: 0,
            um: null,//编译器实例化
            form: null,//layui.form
            layTabId: 1,
            ruleBool: id ? true : false,
        },
        watch:{
            'formData.spec_type':function (n) {
                if (n) {
                    this.render();
                }
            },
        },
        methods: {
            preview:function(src){
            
                var img = new Image();
                img.src = src;
                var height = img.height, width = img.width;
                while(width > 800 || height > 600) {
                    height /= 2;
                    width /= 2;
                }
                layui.use('layer',function(){
                    var layer = layui.layer;
                    layer.open({
                    type: 1,
                    shade: false,
                    title: false,
                    area: [width+'px', height+ 'px'],
                    content: '<img style="width: '+width+'px; height: '+height+'px;" src="'+src+'"/>'
                     });
                });
                
            },
            back:function(){
                var that = this;
                layui.use(['element'], function () {
                    layui.element.tabChange('docTabBrief', that.layTabId == 1 ? 1 : parseInt(that.layTabId) - 1);
                });
            },
            next:function(){
                var that = this;
                layui.use(['element'], function () {
                    layui.element.tabChange('docTabBrief', that.layTabId == 3 ? 3 : parseInt(that.layTabId) + 1);
                });
            },
            goBack:function(){
                location.href = "{:url('admin/goods/index')}";
            },
            /**
             * 提示
             * */
            showMsg: function (msg, success) {
                $('#submit').removeAttr('disabled').text('提交');
                layui.use(['layer'], function () {
                    layui.layer.msg(msg, success);
                });
            },

            showLoading:function(){
                var that = this;
                layui.use(['layer'], function () {
                   that.loading =  layui.layer.load(1);
                }); 
            },

            hideLoading:function(){
                var that = this;
                layui.use(['layer'], function () {
                    layui.layer.close(that.loading);
                }); 
            },

            batchClear:function(){
                this.$set(this,'batchAttr',{
                    pic: '',
                    price: 0,
                    cost: 0,
                    ot_price: 0,
                    stock: 0,
                    bar_code: '',
                    weight: 0,
                    volume: 0,
                });
            },
            /**
             * 批量添加
             * */
            batchAdd:function(){
                var that = this;
                this.$set(this.formData,'attrs',this.formData.attrs.map(function (item) {
                    if (that.batchAttr.pic) {
                        item.pic = that.batchAttr.pic;
                    }
                    if (that.batchAttr.price > 0){
                        item.price = that.batchAttr.price;
                    }
                    if (that.batchAttr.cost > 0){
                        item.cost = that.batchAttr.cost;
                    }
                    if (that.batchAttr.ot_price > 0){
                        item.ot_price = that.batchAttr.ot_price;
                    }
                    if (that.batchAttr.stock > 0){
                        item.stock = that.batchAttr.stock;
                    }
                    if (that.batchAttr.bar_code != ''){
                        item.bar_code = that.batchAttr.bar_code;
                    }
                    if (that.batchAttr.weight > 0){
                        item.weight = that.batchAttr.weight;
                    }
                    if (that.batchAttr.volume > 0){
                        item.volume = that.batchAttr.volume;
                    }
                    return item;
                }));

            },
            /**
             * 给某个属性添加属性值
             * @param item
             * */
            addDetail: function (item) {
                if (!item.detailValue) return false;
                if (item.detail.find(function (val) {
                    if(item.detailValue == val){
                        return true;
                    }
                })) {
                    return this.showMsg('添加的属性值重复');
                }
                item.detail.push(item.detailValue);
                item.detailValue = '';
            },
            /**
             * 删除某个属性值
             * @param item 父级循环集合
             * @param inx 子集index
             * */
            deleteValue: function (item, inx) {
                if (item.detail.length > 1) {
                    item.detail.splice(inx, 1);
                } else {
                    return this.showMsg('请设置至少一个属性');
                }
            },
            /**
             * 删除某条属性
             * @param index
             * */
            deleteItem: function (index) {
                this.formData.items.splice(index, 1);
            },
            /**
             * 删除某条属性
             * @param index
             * */
            deleteAttrs: function (index) {
                var that = this;
                if (that.formData.attrs.length > 1) {
                        that.formData.attrs.splice(index, 1);
                    } else {
                        return that.showMsg('请设置至少一个规则');
                }
            },
            /**
             * 创建属性
             * */
            createAttrName: function () {
                if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
                    if (this.formData.items.find(function (val) {
                        if (val.value == this.formDynamic.attrsName) {
                            return true;
                        }
                    }.bind(this))) {
                        return this.showMsg('添加的属性重复');
                    }
                    this.formData.items.push({
                        value: this.formDynamic.attrsName,
                        detailValue: '',
                        attrHidden: false,
                        detail: [this.formDynamic.attrsVal]
                    });
                    this.formDynamic.attrsName = '';
                    this.formDynamic.attrsVal = '';
                    this.newRule = false;
                } else {
                    return this.showMsg('请添加完整的规格!');
                }
            },
            /**
             * 删除图片
             * */
            deleteImage: function (key, index) {
                var that = this;
                if (index != undefined) {
                    that.formData[key].splice(index, 1);
                    that.$set(that.formData, key, that.formData[key]);
                } else {
                    that.$set(that.formData, key, '');
                }
            },
        
           
            getRule: function (name) {
                return this.rule[name] || {};
            },
          
            change_file:function(index,key){
              var that = this;
                var inputFile  = this.$refs[index][0]['files'][0];
                var data = new FormData();
                data.append('file', inputFile);
                this.requestPost( "{:url('admin/upload/upload_file')}", data).then(function (res) {
                    that.formData.attrs[key]['pic'] = res.data.src;
                }).catch(function (res) {
                    return that.showMsg(res.msg);
                });
            },
           
            change_attr_img:function(index){
                //单规格
                var that = this;
                var inputFile  = this.$refs[index]['files'][0];
                var data = new FormData();
                data.append('file', inputFile);
                this.requestPost( "{:url('admin/upload/upload_file')}", data).then(function (res) {
                    that. formData.attr.pic = res.data.src;
                }).catch(function (res) {
                    return that.showMsg(res.msg);
                });
            },
            change_image:function(index){
                //缩略图
                var that = this;
                var inputFile  = this.$refs[index]['files'][0];
                var data = new FormData();
                data.append('file', inputFile);
                this.showLoading();
                this.requestPost( "{:url('admin/upload/upload_file')}", data)
                .then(function (res) {
                    that.formData.image = res.data.src;
                    that.formData.attr.pic   = res.data.src; //无规则商品 视为单规格  将缩略图放入单规格图片
                    that.hideLoading();
                }).catch(function (res) {
                    return that.showMsg(res.msg);
                    that.hideLoading();
                });
            },
             change_images:function(e){
                //轮播图
                var files = e.target.files || e.dataTransfer.files;
                var that  = this;
                for(i=0;i<files.length;i++){
                    var data = new FormData();
                   data.append('file', files[i]);
                   this.showLoading();
                    that.requestPost( "{:url('admin/upload/upload_file')}", data).then(function (res) {
                    that.formData.slider_image.push(res.data.src) ;
                    that.hideLoading();
                        }).catch(function (res) {
                            that.hideLoading();
                            return that.showMsg(res.msg);
                        });
                }
            },
            change_batch:function(index){
                //批量设置
               var that = this;
                var inputFile  = this.$refs[index]['files'][0];
                var data = new FormData();
                data.append('file', inputFile);
                this.requestPost( "{:url('admin/upload/upload_file')}", data).then(function (res) {
                    that.batchAttr.pic = res.data.src;
                }).catch(function (res) {
                    return that.showMsg(res.msg);
                });
            },
            upload_item:function(name){
                $(this.$refs[name]).click();  
            },
            uploadVideo: function () {
              
                if (this.videoLink) {
                    this.formData.video_link = this.videoLink;
                } else {
                    $(this.$refs.filElem).click();
                }
              
            },
            delVideo: function () {
                var that = this;
                that.$set(that.formData, 'video_link', '');
            },
            insertEditor: function (list) {
                this.um.execCommand('insertimage', list);
            },
            insertEditorVideo: function (src) {
                this.um.setContent('<div><video style="width: 99%" src="'+src+'" class="video-ue" controls="controls" width="100"><source src="'+src+'"></source></video></div><br>',true);
            },
            getContent: function () {
                return this.um.getContent();
            },
            /**
             * 监听radio字段
             */
            eeventRadio: function () {
                var that = this;
                that.radioRule.map(function (val) {
                    that.form.on('radio(' + val + ')', function (res) {
                        that.formData[val] = res.value;
                    });
                })
            },
            init: function () {
                var that = this;
                  //实例化编辑器
                this.um = UM.getEditor('myEditor', {initialFrameWidth: '99%', initialFrameHeight: 400,imageUrl:"{:url('admin/upload/editor_upload')}?action=uploadimage",imagePath:'',toolbar:[
'source | undo redo | emotion horizontal forecolor backcolor | bold italic underline strikethrough | superscript subscript | removeformat |',
'insertorderedlist insertunorderedlist | selectall cleardoc paragraph | fontfamily fontsize' ,
'| justifyleft justifycenter justifyright justifyjustify|',
'link unlink image fullscreen'
]});
                    // 修改百度编辑器自定义上传接口

                this.um.setContent(that.formData.description);
                 that.$nextTick(function(){
                    layui.use(['form','layer','element','upload'],function(){
                            that.form = layui.form;
                            var element = layui.element;
                            var upload  = layui.upload;
                            element.on('tab(docTabBrief)', function(){
                                that.layTabId = this.getAttribute('lay-id');
                            });
                             that.form.on('select(cate)', function (res) {
                                    that.formData.cate_id = res.value;
                                });
                            that.form.on('select(rule_index)', function (data) {
                                    that.ruleIndex = data.value;
                            });
                            that.eeventRadio();
                            
                    });
                 })
            },
            requestPost: function (url, data) {
                return new Promise(function (resolve, reject) {
                    axios.post(url, data).then(function (res) {
                        if (res.status == 200 && res.data.code == 1) {
                            resolve(res.data)
                        } else {
                            reject(res.data);
                        }
                    }).catch(function (err) {
                        reject({msg:err})
                    });
                })
            },
            requestGet: function (url) {
                return new Promise(function (resolve, reject) {
                    axios.get(url).then(function (res) {
                        if (res.status == 200 && res.data.code == 1) {
                            resolve(res.data)
                        } else {
                            reject(res.data);
                        }
                    }).catch(function (err) {
                        reject({msg:err})
                    });
                })
            },
            generates: function () {
                var that = this;
                that.generate(1);
            },
            generate: function (type = 0) {
                var that = this;
                this.requestPost( "{:url('admin/goods/is_format_attr')}", {attrs:this.formData.items,id:that.id,type:type}).then(function (res) {
                    that.$set(that.formData, 'attrs', res.data.value);
                    that.$set(that, 'formHeader', res.data.header);
                }).catch(function (res) {
                    return that.showMsg(res.msg);
                });
            },
            handleSubmit:function () {
                var that = this;
                if (!that.formData.cate_id) {
                    return that.showMsg('请选择商品分类');
                }
                if (!that.formData.store_name) {
                    return that.showMsg('请填写商品名称');
                }
                if (!that.formData.image) {
                    return that.showMsg('请填选择商品图');
                }
                if (!that.formData.slider_image.length) {
                    return that.showMsg('请填选择商品轮播图');
                }
                if (that.formData.spec_type == 0) {
                    if (!that.formData.attr.pic) {
                        return that.showMsg('请选择单规则图片');
                    }
                    if (that.formData.attr.price == '') {
                        return that.showMsg('请输入单规格价格');
                    }
                    if (that.formData.attr.ot_price == '') {
                        return that.showMsg('请输入单规格原价');
                    }
                    if (!that.formData.attr.stock) {
                        return that.showMsg('请输入单规格库存');
                    }
                    var attr = {
                        pic:that.formData.attr.pic,
                        price:that.formData.attr.price,
                        cost:that.formData.attr.cost,
                        ot_price:that.formData.attr.ot_price,
                        stock:that.formData.attr.stock,
                        bar_code:that.formData.attr.bar_code,
                        volume:that.formData.attr.volume,
                        weight:that.formData.attr.weight
                    };
                    that.formData.attrs = [attr];
                } else {
                    if (!that.formData.attrs.length) {
                        return that.showMsg('请添加多规格属性');
                    }
                    for(var index in that.formData.attrs){
                        if(!that.formData.attrs[index].pic){
                            return that.showMsg('请选择多规格属性第'+(parseInt(index) +1)+'条的图片');
                        }
                        if(that.formData.attrs[index].price === ''){
                            return that.showMsg('请填写多规格属性第'+(parseInt(index) +1)+'条的价格');
                        }
                        if(that.formData.attrs[index].ot_price === ''){
                            return that.showMsg('请填写多规格属性第'+(parseInt(index) +1)+'条的原价');
                        }
                        if(that.formData.attrs[index].stock === ''){
                            return that.showMsg('请填写多规格属性第'+(parseInt(index) +1)+'条的库存');
                        }
                    }
                }
                that.formData.description = that.getContent();
                $('#submit').attr('disabled', 'disabled').text('保存中...');
                if(that.id){
                    var url  = "{:url('admin/goods/edit')}"+"?id="+that.id;
                }else{
                    var url  = "{:url('admin/goods/add')}";
                }
                that.requestPost(url,that.formData).then(function (res) {
                    that.confirm();
                }).catch(function (res) {
                    that.showMsg(res.msg);
                });
            },
            confirm: function(){
                var that = this;
                layui.use(['layer'], function () {
                    var layer = layui.layer;
                    layer.confirm(that.id ? '修改成功是否返回产品列表' : '添加成功是否返回产品列表', {
                        btn: ['返回列表',that.id ? '继续修改' : '继续添加'] //按钮
                    }, function(){
                        location.href =  "{:url('admin/goods/index')}";
                    }, function(){
                        location.reload();
                    });
                });
            },
            render:function(){
                this.$nextTick(function(){
                    layui.use(['form'], function () {
                        layui.form.render();
                    });
                })
            },
            getRuleList:function (type) {
                var that = this;
                that.requestGet("{:url('admin/goods/get_rule')}").then(function (res) {
                    that.$set(that,'ruleList',res.data);
                     that.render();
                      
                });
            },
                       /**
             * 获取商品信息
             * */
            getProductInfo: function () {
                var that = this;
                that.requestGet("{:url('admin/Goods/get_product_info')}"+"?id="+that.id).then(function (res) {
                    that.$set(that,'cateList',res.data.cateList);
                    var productInfo = res.data.productInfo || {};
                    if(productInfo.id && that.id){
                        if(productInfo.video_link){
                            that.videoLink = productInfo.video_link;
                        }
                        that.$set(that,'formData',productInfo);
                        that.generate();
                    }
                    that.getRuleList();
                    that.init();
                }).catch(function (res) {
                    that.showMsg(res.msg);
                })
            },

            allRule:function () {
                if (this.ruleIndex != -1) {
                    var rule = this.ruleList[this.ruleIndex];
                    if (rule) {
                        this.ruleBool = true;
                        var rule_value = rule.rule_value.map(function (item) {
                            return item;
                        });
                        this.$set(this.formData,'items',rule_value);
                        this.$set(this.formData,'attrs',[]);
                        this.$set(this,'formHeader',[]);
                        return true;
                    }
                }
                
                this.showMsg('选择的属性无效');
            }
        },
        mounted: function () {
            var that = this;
            that.getProductInfo();
            axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
            $(that.$refs.filElem).change(function () {
                var inputFile = this.files[0];
                that.requestPost("{:url('admin/upload/get_signature')}").then(function (res) {
                    AdminUpload.upload(res.data.uploadType,{
                        token: res.data.uploadToken || '',
                        file: inputFile,
                        accessKeyId: res.data.accessKey || '',
                        accessKeySecret: res.data.secretKey || '',
                        bucketName: res.data.storageName || '',
                        region: res.data.storageRegion || '',
                        domain: res.data.domain || '',
                        static_path:res.data.static_path || '',
                        static_url : res.data.static_url || '',
                        uploadIng:function (progress) {
                            that.upload.videoIng = true;
                            that.progress = progress;
                        }
                    }).then(function (res) {
                      
                        //成功
                        that.$set(that.formData, 'video_link', res.url);
                        that.progress = 0;
                        that.upload.videoIng = false;
                        $(that.$refs.filElem).val('');
                        return that.showMsg('上传成功');
                    }).catch(function (err) {
                        //失败
                        console.info(err);
                        $(that.$refs.filElem).val('');
                        return that.showMsg('上传错误请检查您的配置');
                    });
                }).catch(function (res) {
                    $(that.$refs.filElem).val('');
                    return that.showMsg(res.msg || '获取密钥失败,请检查您的配置');
                    
                });
            })
        }
    });
</script>

{/block}

